<template>
  <div class="mt-4">
    <div class="px-4" :class="{ loading }">
      <div class="gap-col-8">
        <div v-if="loading" class="title"></div>
        <div v-if="loading" class="creator-container gap-row-5">
          <div v-for="n in 4" :key="`creator-skeleton-${n}`" class="avatar"></div>
        </div>
        <div v-if="!loading" class="flex">
          <div class="d-flex justify-space-between w-full">
            <div class="font-size-14 font-weight-500 line-height-125">{{ $t('title.popularCreator') }}</div>
            <div class="font-size-14 font-weight-500 line-height-125 pointer watch-more" @click="toCreators">
              {{ $t('common.watchMore') }}
              <Icon name="arrowRight" size="18"></Icon>
            </div>
          </div>
        </div>
        <div v-if="!loading" class="creator-container gap-row-5">
          <CreatorAvatar
            v-for="creator in popularCreators"
            :key="`creator-${creator.aff}`"
            :item="creator"
            @click:item="onCreatorClick"
          ></CreatorAvatar>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onActivated, onDeactivated, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useSearchStore } from '@/store/search'
import CreatorAvatar from '@/components/multimedia/CreatorAvatar.vue'
import { useNavRefresh } from '@/compositions/nav/refresh'
import { useInfinite } from '@/compositions/request/infinite'
import { useExecutionLock } from '@/compositions/utils'
import { MEDIA_VISIBILITY, NAVS } from '@/constant'
import { trackEvent } from '@/gtm'
import API from '@/http'

const router = useRouter()
const toCreators = () => router.replace({ name: 'popular-creators' })

const searchStore = useSearchStore()
const { toMainViewer, toCreatorViewer, activeRootFetcher, deactiveRootFetcher } = searchStore

const { disabled: loading, onExecute } = useExecutionLock()
const popularCreators = ref([{}, {}, {}, {}])
function fetchHome() {
  onExecute(async () => {
    const { creator } = await API.Search.home()
    popularCreators.value = creator
  })
}

const fetcher = ref({
  video: useInfinite({
    request: API.Media.getVideoList,
    params: { visible: MEDIA_VISIBILITY.EVERYONE },
    limit: import.meta.env.VITE_MEDIA_LIST_LIMIT ?? 12,
  }),
  photo: useInfinite({
    request: API.Media.getPhotoList,
    params: { visible: MEDIA_VISIBILITY.EVERYONE },
    limit: import.meta.env.VITE_MEDIA_LIST_LIMIT ?? 12,
  }),
})
onMounted(() => fetchHome())
onActivated(() => {
  toMainViewer(fetcher.value)
  activeRootFetcher()
})
onDeactivated(deactiveRootFetcher)

function onCreatorClick(aff, username) {
  trackEvent({ key: 36, value: null, meta: { aff } })
  toCreatorViewer(aff, username)
}

useNavRefresh(NAVS.SEARCH, () => {
  fetchHome()
  fetcher.value.video.refresh()
  fetcher.value.photo.refresh()
})
</script>
<style scoped lang="scss">
@import '@/assets/styles/loading-skeleton.scss';

.creator-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.loading {
  width: 100%;

  .title {
    height: 1.5rem;
    border-radius: 0.625rem;
    @include loading-skeleton;
  }
  .avatar {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    @include loading-skeleton;
  }
}

.watch-more {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
